
export const i = {
  mixins: [playerMixin],
  data() {
    return {
      audioSrc: '', // 歌曲播放地址
      songReady: false, // 歌曲是在否准备
      playMode: { // 播放模式
        sequence: 0, // 顺序
        loop: 1,    // 循环
        random: 2   // 随机
      },
      currentTime: 0, // 音频目前播放时间
      currentLyric: null, // 歌词对象
      currentLineNum: 0, // 当前播放那个的歌词行数
      playingLyric: '', // 当前播放的歌词
      currentShow: 'cd', // 当前展示的是歌词还是cd
      touch: {} // 是否手指滑动状态
    }
  },
  computed: {
    ...mapState({
      fullScreen: 'fullScreen', // 控制全屏
      playList: 'playList',  // 播放列表的数据是否存在
      currentSong: 'currentSong', // 当前播放歌曲
      playing: 'playing', // 播放状态
      currentIndex: 'currentIndex', // 当前歌曲索引
      mode: 'mode', // 播放模式
      sequenceList: 'sequenceList', // 随机播放列表
      historyPlay: 'historyPlay', // 播放历史
      loveMusic: 'loveMusic', // 喜欢的歌曲
    }),
    imgsrc() {  // 图片地址
      return JSON.stringify(this.currentSong) == '{ }' ? '' : `https://y.gtimg.cn/music/photo_new/T002R300x300M000${this.currentSong.album.mid}.jpg`
    },
    playIcon() { // 播放暂停按钮
      return this.playing ? 'icon-pause' : 'icon-play'
    },
    miniIcon() { // mini播放器icon变化
      return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
    },
    // 当播放时候中间图片进行旋转
    rorate() {
      return this.playing ? 'play' : 'play pause'
    },
    // 播放模式图标
    iconMode() {
      return this.mode === this.playMode.sequence ? 'icon-sequence' : this.mode === this.playMode.loop ? 'icon-loop' : 'icon-random'
    },
    // 当歌曲未加载时候播放暂停按钮不可用
    disabledCls() {
      return this.songReady ? '' : 'disable'
    },
    // 计算当前播放时间与总时间的比例
    precent() {
      return this.currentTime / this.currentSong.interval
    }
  },
  methods: {
    // 大小播放器之间的切换
    back(status) {
      this.$store.commit('setFullScreen', status)
    },
    // 获取播放地址
    async fetchAudioSrc(mid) {
      this.audioSrc = ''
      const { data: res } = await this.$http.get('/api/song/urls?id=' + mid)
      if (JSON.stringify(res.data) == {}) { // 没有播放地址
        this.audioSrc = ''
      } else {
        this.audioSrc = res.data[mid]
      }
      if (this.audioSrc == undefined) {
        clearTimeout(this.timeAudio)
        this.timeAudio = setTimeout(() => {
          // 播放下一首
          this.changeIndex(1)
        }, 3000)
      }
    },
    // 获取歌词
    async fetchLyric(mid) {
      const { data: res } = await this.$http.get('/api/lyric?songmid=' + mid)
      if (res.result == 100) {
        // res.data.lyric // 歌词数据
        this.currentLyric = new Lyric(res.data.lyric, this.handleLyric) //this.handleLyric回调函数
        this.currentLyric.play()
      } else {
        // 获取不到歌词清空
        this.currentLyric = null
        this.playingLyric = ''
        this.currentLineNum = 0
      }
    },
    // 处理歌词播放
    handleLyric({ lineNum, txt }) {
      this.currentLineNum = lineNum
      if (lineNum > 5) {
        let lineEl = this.$refs.lyricLine[lineNum - 5]
        this.$refs.lyricList.scrollToElement(lineEl, 1000)// 滚动到元素
      } else {
        this.$refs.lyricList.scrollTo(0, 0, 1000)// 滚动到顶部
      }
      this.playingLyric = txt
    },
    // 音频加载成功，可以播放
    ready() {
      this.songReady = true
      this.$store.commit('setPlaying', true)
      // 加载成功就可以播放
      this.$refs.audio.play()
    },
    // 音频加载错误
    error() {
      this.songReady = false
    },
    // 播放器播放状态
    changePlaying() {
      if (this.songReady) {
        this.playing ? this.$store.commit('setPlaying', false) : this.$store.commit('setPlaying', true)
        if (this.currentLyric) {
          // 歌词暂停与播放
          this.currentLyric.togglePlay()
        }
      }
    },
    // 上一首下一首实现
    changeIndex(i) {
      // 当只有一首歌的时候执行loop方法
      if (this.playList.length === 1) {
        this.loop()
      } else {
        let index = this.currentIndex + i
        if (index < 0) index = this.playList.length - 1
        if (index == this.playList.length) index = 0
        this.$store.commit('setCurrentIndex', index)
      }
    },
    // 歌曲结束
    end() {
      if (this.mode === this.playMode.loop) {
        this.loop()
      } else {
        // 如果不是循环播放，则自动播放下一首
        this.changeIndex(1)
      }
    },
    // 改变播放模式
    changeMode() {
      const mode = (this.mode + 1) % 3
      this.$store.commit('setMode', mode)
      let list = null
      if (mode == this.playMode.random) {
        this.shuffle(this.sequenceList)
        list = this.sequenceList
      } else {
        list = this.sequenceList
      }
      this.resetCurrentIndex(list)
      this.$store.commit('setPlayList', list)
    },
    // 循环播放
    loop() {
      this.$refs.audio.currentTime = 0
      this.$refs.audio.play()
      if (this.currentLyric) {
        this.currentLyric.seek(0)
      }
    },
    // 数组乱序
    shuffle(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    },
    // video的时间更新属性
    updateTime(e) {
      // e.target.currentTime 就是歌曲当前播放时间
      this.currentTime = e.target.currentTime
    },
    // 解决时间显示问题
    forMat(interval) {
      interval = interval | 0
      const minute = interval / 60 | 0
      const second = interval % 60 | 0
      if (second < 10) return `${minute}:0${second}`
      return `${minute}:${second}`
    },
    precentChange(precent) {
      // 拉动bar进度条后设置audio播放时间
      const currentTime = this.currentSong.interval * precent
      this.$refs.audio.currentTime = currentTime
      // 拉动bar进度条后歌词跟着进度条变化到和歌曲一样的
      if (this.currentLyric) {
        this.currentLyric.seek(currentTime * 1000)
      }
    },
    middleTouchStart(e) {
      this.touch.initiated = true
      const touch = e.touches[0]
      this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
    },
    middleTouchMove(e) {
      if (!this.touch.initiated) {
        return
      }
      const touch = e.touches[0]
      const deltaX = touch.pageX - this.touch.startX
      const deltaY = touch.pageY - this.touch.startY
      // 纵轴滚动偏差绝对值大于横轴滚动偏差绝对值，不该移动。只支持横向移动。
      if (Math.abs(deltaY) > Math.abs(deltaX)) {
        return
      }
      // 歌词偏移量限制
      const width = deltaX
      if (width < 0) {
        this.$refs.lyricList.$el.style.left = '0'
        this.$refs.middleL.style.opacity = `${width / window.innerWidth}`
        this.currentShow = 'lyric'
      } else {
        this.$refs.lyricList.$el.style.left = '100%'
        this.$refs.middleL.style.opacity = '1'
        this.currentShow = 'cd'
      }
    },

    middleTouchEnd() {
      this.touch.initiated = false
    },
    // playlist的显示与隐藏
    showPlaylist() {
      this.$refs.playList.show()
    },
    // 双击歌词播放
    playCurrentLyric(line) {
      const currentTime = line.time
      this.$refs.audio.currentTime = currentTime / 1000
      // 拉动bar进度条后歌词跟着进度条变化到和歌曲一样的
      if (this.currentLyric) {
        this.currentLyric.seek(currentTime)
      }
    }
  },
  watch: {
    currentSong() {
      // 歌曲改变进行本地存储
      if (this.currentSong == undefined) {
        this.$store.commit('setCurrentSong', {})
        return
      }
      this.fetchAudioSrc(this.currentSong.mid)
      // 防止歌词跳动
      if (this.currentLyric) {
        this.currentLyric.stop()
        this.currentLyric = null
        this.playingLyric = ''
        this.currentLineNum = 0
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.fetchLyric(this.currentSong.mid)
      }, 1000)
      this.local(this.historyPlay, "historyPlay")
    },
    playing() {
      const audio = this.$refs.audio
      this.playing ? audio.play() : audio.pause()
    },
    currentIndex() {
      this.getFavoriteIcon()
    }
  },
  components: {
    progressBar,
    scroll,
    playList,
    Toast
  },
}

